<template>
  <div>
    <div id="main" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted } from "vue";
import { Trend } from "@/http/chart.js";
import * as echarts from "echarts";
const state = reactive({
  dailyCurvetime: [],
  dailyCurvetitle: [],
  monthAmountListitle: [],
});
const listgett = async () => {
  const res = await Trend();
  res.data.monthAmountList.forEach((item) => {
    state.monthAmountListitle.push(item.amount);
  });
  res.data.dailyCurve.forEach((item) => {
    state.dailyCurvetime.push(item.time);
  });
  res.data.dailyCurve.forEach((item) => {
    state.dailyCurvetitle.push(item.amount);
  });

  chartOpt();
};
const chartOpt = () => {
  const chartDom = document.getElementById("main");
  const myChart = echarts.init(chartDom);

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ["Evaporation", "Temperature"],
    },
    xAxis: [
      {
        type: "category",
        data: [...state.dailyCurvetime],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: 175,
        interval: 30,
        axisLabel: {
          formatter: "{value} 万元",
        },
      },
      {
        type: "value",
        name: "",
      },
    ],
    series: [
      {
        name: "月累计收益",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "万元";
          },
        },
        barWidth: 30,
        data: [...state.dailyCurvetitle],
      },

      {
        name: "日累计曲线",
        type: "line",

        tooltip: {
          valueFormatter: function (value) {
            return value + "万元";
          },
        },
        data: [...state.monthAmountListitle],
      },
    ],
  };

  option && myChart.setOption(option);
};
onMounted(() => {
  listgett();
  setTimeout(() => {
    chartOpt();
  }, 1000);
});
</script>

<style lang="scss" scoped>
</style>